Raira 3

rus · April 27, 2009

Вобщем давно не верстал (очень давно), решил на этом простом макете попробовать...

Не очень получилось, если конкретно, то:

1) В Опере, при разрешении полоска отделяющая контент от правого блока (во всех остальных нормально).

2) Во всех (кроме ИЕ) браузерах сверху отступ.

з) При разрешении скажем 800*600 появляется скролл, но мало того, еще справа белое пустое пространство - это во всех браузерах.

4) При разрешении 800*600 блоки (Content, Left_blok, Right_blok) Скачут относительно футера зигзагом как бешенные.

Можете попинать (не обижусь), только не сильно...

Вобщем выставляю не для обсуждения, а как и задумывалось Дмитрием для получения опыта.

А вот и сам макет - жми!

З.Ы. если кому не трудно будет ткнуть в ошибки, то сделайте милость.

Victor Ananiev · April 27, 2009

почему лейблы картинками, они monotype corsiva шрифтом написаны.

по дизайну:

1) Лупа приближает)

2) Фон под левым лого как то резко становится белым

в код не смотрел...

psywalker · April 27, 2009

rus Не мне тебя учить, но всё же немного могу указать на ошибки:

1) Имхо, много элементов и свойств ненужных абсолютно ,типа : #wrap

2) У боди нужно было задать фон, такойже, как в центре, потомучто при сужении экрана в некоторых местах просвечивается его настоящий- белый

3)У .head_top p надо было убрать Марджины и добавить Паддинги, тогдабы полоса исчезла

4) меню в <div class="head_bottom"> на ссылки надо было повесить Position: relative; и z-index: 333; потому что при сужении экрана, когда меню заходит на картинку ПНГ - чернильницу, то уже ссылки перестают работать

5) бабочке лучше быть в контейнере, который ей пренадлежит, потому что при заполнении Хедера она останется на месте, а её блок <div class="right_blok"> уедет вниз

6) Шрифты не соответствуют макетным

7) В ИЕ6 Пнг не работает, надо было применить фильтры и заменить изображения

Edited April 27, 2009 by psywalker

Great Rash · April 27, 2009

Код не смотрел ибо влом.

Заголовок: "углосуточная консультация по телефону" - это не очепятка, у меня уехал кусок слова под перо.

Горизонтальный скролл... буэээээ

Шрифт - отстой

Бабочки не в тему

Забыли © в футере

На ссылки "Автомобили" и "Имущество" невозможно кликнуть

Фон левого блока заканчивается пикселей на 10 раньше правого

UPD: Забыл сказать, разрешение моего монитора 1024х768

Edited April 27, 2009 by Great Rash

rus · April 27, 2009

почему лейблы картинками, они monotype corsiva шрифтом написаны.
по дизайну:
1) Лупа приближает)
2) Фон под левым лого как то резко становится белым
в код не смотрел...

Насчет лейблов не понял, что ты имеешь ввиду?

1) Не понял..., а как должно быть? Вроде все по макету.

2) Это да, поправлю.

По вышеописаным багам есть предложения?

Edited April 27, 2009 by rus

psywalker · April 27, 2009

rus

Да он гонит, лупа приближает нормально :)

rus · April 27, 2009

rus Не мне тебя учить, но всё же немного могу указать на ошибки:
1) Имхо, много элементов и свойств ненужных абсолютно ,типа : #wrap
2) У боди нужно было задать фон, такойже, как в центре, потомучто при сужении экрана в некоторых местах просвечивается его настоящий- белый
3)У .head_top p надо было убрать Марджины и добавить Паддинги, тогдабы полоса исчезла
4) меню в <div class="head_bottom"> на ссылки надо было повесить Position: relative; и z-index: 333; потому что при сужении экрана, когда меню заходит на картинку ПНГ - чернильницу, то уже ссылки перестают работать
5) бабочке лучше быть в контейнере, который ей пренадлежит, потому что при заполнении Хедера она останется на месте, а её блок <div class="right_blok"> уедет вниз
6) Шрифты не соответствуют макетным
7) В ИЕ6 Пнг не работает, надо было применить фильтры и заменить изображения

1) Это уже привычка пихать все элементы сайта в один основной контейнер.

2) В этом и проблема! Представь на минуту, что фоны у блоков разные и что тогда?

3) Да, верно просто глаз замылился у меня, из-за таких мелочей порой голову ломаешь, а на самом деле просмотрел. Спасибо!

4) На счет Position: relative; не думал что поможет - сработало.

5) Здесь ничего не понял. Куда именно добавить текст что бы правый блок уехал в низ? И какому именно контейнеру должна принадлежать бабочка, если у нее все равно position:absolute;?

6) В полне может быть, так как у меня глюки со шрифтами в фотошопе (надо бы поудалять установленные шрифты, так как они криво встали а не знаю как, не затронув стандартные).

7) Жаль что у меня нет для теста ИЕ 6, хотя..., думаю на этот баг сейчас уже не стоит обращать внимание.

По поводу полосы справа при скроллировании что скажешь?

Verder · April 27, 2009

Незнаю, важна ли для Вас оценка новичка на этом форуме, но позволю себе несколько замечаний.

Первое впечатление - "Полосатые наступают"...

Как-то тяжело, не внушает оптимизма. Не захочется в такой страховой компании ничего страховать.

Если красный - корпоративный цвет, это не значит, что он должен давить и поглощать собой все остальные цвета.

1. Никто, конечно, не запрещает использовать стандартные фильтры и эффекты фотошопа, но Outer Glow в логотипе...

2. Ну не бывает таких теней и отражений, не бывает. Очень неаккуратно, в общем то, весь визуал сделан. (А причем тут бабочки?)

3. Неоправдано использование жирного шрифта.

4. Если есть необходимость использовать в качестве визуала чернильницу, то логичнее опустить ее в левый (или правый) нижний угол или сделать красивый центральный визуал и использовать на нем. Чтобы не было ощущения, что чернильница щас епнется и зальет собой весь сайт (и будет без помарок). Использовать, например, лакированную, темно коричневую столешницу, простую стеклянную чернильницу, золотое перышко... На этом визуале от руки (не шрифтом наденным на говносайтах, а отсканенным, своим почерком) написать слоган... А то как то не смотрится ариал в 10 пунктов в качестве слогана. И не Smooth а Sharp(!!!) если такой кегль используете.

Логотип сместить левее.

Пока все.

Edited April 27, 2009 by Verder

rus · April 27, 2009

Незнаю, важна ли для Вас оценка новичка на этом форуме, но позволю себе несколько замечаний.

Для меня лично, важна любая оценка, но так как это творение не мое - ко мне притензий никаких.

Для всех говорю, кто собрался комментировать не верстку и проблемы связанные с ней (а так же правильную резку макета), а сам макет, тоесть дизайн - посмотрите этот топик и все станет ясно.

Verder · April 27, 2009

Для меня лично, важна любая оценка, но так как это творение не мое - ко мне притензий никаких.
Для всех говорю, кто собрался комментировать не верстку и проблемы связанные с ней (а так же правильную резку макета), а сам макет, тоесть дизайн - посмотрите этот топик и все станет ясно.

Я не высказываю претензии - спросили мнение и я высказался

А вообще, верстка версткой, но если сделать просто опупенную верстку такому макету (визуал остаить как есть) и потом попытаться доказать заказчику, что верстка в сайте главное... ну сами понимаете, что сразу будете за свой счет отправлены в пешее путешествие с эротическим уклоном

psywalker · April 27, 2009

rus

1)

Здесь ничего не понял. Куда именно добавить текст что бы правый блок уехал в низ? И какому именно контейнеру должна принадлежать бабочка, если у нее все равно position:absolute;?

Контейнер бабочки является <div class="right_blok">, потомучто они относяться к экспертизе, в нём даже отступ для неё есть сверху, поэтому надо было бабочку помещать в контейнер <div class="right_blok"> и уже относительно Его позиционировать её ..

2)

Жаль что у меня нет для теста ИЕ 6, хотя...,

Скачай IETester, или установи виртуалку

2.1.)

думаю на этот баг сейчас уже не стоит обращать внимание.

К сожалению стоит(((

2.2)

По поводу полосы справа при скроллировании что скажешь?

У меня вроде всё гуд

3)

В этом и проблема! Представь на минуту, что фоны у блоков разные и что тогда?

Фон у Боди будет серым, а если понадобиться назначить цвет у любого блока, в этом не будет проблем, так как Фон блока ляжет на Фон Боди без проблем..

4)

Это уже привычка пихать все элементы сайта в один основной контейнер.

Имхо , старая и не очень хорошая привычка, так как можно было намного проще всё сделать, используя намного меньше материала, посмотри на мой например вариант, тоже не супер конечно, но всёже... http://www.psywalker.ru/Raira/main-page.html

Edited April 27, 2009 by psywalker

Verder · April 27, 2009

...Имхо , старая и не очень хорошая привычка, так как можно было намного проще всё сделать, используя намного меньше материала, посмотри на мой например вариант, тоже не супер конечно, но всёже... http://www.psywalker.ru/Raira/main-page.html

Куча мусора сверстанного в дерьмовьюере или чем-то подобном.

При таком количестве мусора наполовину теряется смысл верстки дивами.

Хотя внешне все аккуратно.

P.S.

Не обижайся только.

Edited April 27, 2009 by Verder

psywalker · April 27, 2009

Verder В смысле , поподробнее пожалуйста? Что ты имеешь ввиду под словом "Мусор" ? И как по твойму надо верстать Дивами?

Покажи дружище пример своих работ, чтобы мы могли поучиться у мастера

Edited April 27, 2009 by psywalker

Verder · April 27, 2009

Verder В смысле , поподробнее пожалуйста?

Ну открой код страницы в любом браузере и посмотри. Пробелы, кавычки и.т.д... (давай не будем про валидность кода, это сказки для демагогов)

Сам понимаю, что при нынешних каналах связи лишние 20-30 килобайт - ерунда, но все же.

Ясно, что верстать в редакторе и проще и быстрее, но уж после того как сверстал, лучше потратить 15 минут на чистку кода, чем выслушивать на форуме возласы таких "неадекватов" как я (за что всегда себя корю)

P.S.

Ниже на одну тему ссылочка на мой макет лежит. Не спорю, я не дока в верстке слоями, есть ошибки, но время потратил...

Это не камень в твой огород, ты однозначно знаешь что делаешь.

psywalker · April 27, 2009

Verder

Погоди, погоди, про какие пробелы и кавычки ты говоришь , хотябы кусок кода покажи плохого?

Что значит Чистка кода по твойму, и где он грязный?, опятьже приведи Код

Где ссылочка на твой макет? не вижу

Verder · April 27, 2009

Verder
Погоди, погоди, про какие пробелы и кавычки ты говоришь , хотябы кусок кода покажи плохого?
Что значит Чистка кода по твойму, и где он грязный?, опятьже приведи Код

Да весь код... верстка дримвьюерная. Хотя бы этот кусок.

<!-- News -->
	<div id="news">
		<p>Очень интересные новости нашей компании и нашего сайта. Не теряя времени пройдите по ссылке.</p>
		<p>Очень интересные новости нашей компании и нашего сайта. Не теряя времени пройдите по ссылке.</p>
		<ul>
			<li><a href="#">ОСАГО</a></li>
			<li><a class="page" href="#">ДСАГО</a></li>
			<li><a href="#">КАСКО</a></li>
			<li><a href="#">Оценка ущерба</a></li>
		</ul>
	</div><!-- end news -->

	<!-- Expertise -->
	<div id="expertise">
		<img src="img/butterfly-trans.png" alt="buterfly" />
		<p>Согласно Лицензии на оценочную деятельность №010257 от 24.11.2004г., мы оказываем следующие <a href="#" class="block" >услуги по оценке и экспертизе.</a></p>
		<h2 class="discount">Скидни</h2>
		<p>каждому посетителю сайта на <a href="#">КАСКО</a> и <a href="#">ОСАГО</a> (до 20%)</p>
		<h2 class="address">Наш адрес</h2>
		<p>Москва,метро Волжская (5 минут пешком)ул. Шкулёва, дом 17. Посмотрите <a href="#">схему проезда</a> и приезжайте в гости.</p>
	</div><!-- end expertise -->

	<!-- Content -->
	<div id="cnt">
		<p><span>ООО "Раира" </span> является официальным представителем известнейших и надёжных страховых компаний России, заслуживших доверие и признание клиентов: </p>
		<p class="sponsor"><a href="#"><img src="img/rosgor.gif" alt="rosgor" /></a>
		<a href="#"><img src="img/asto.jpg" alt="asto" /></a>
		<a href="#"><img src="img/yes.jpg" alt="yes" /></a></p>
		<h3>Мы рады предложить Вам:</h3>
		<ul>
			<li><p>все возможные виды страхования</p></li>
			<li><p>наиболее выгодные условия страховой сделки</p></li>
			<li><p>самую подробную информацию о страховых продуктах и страховании вообще</p></li>
		</ul>
		<p>Если у Вас нет возможности приехать в наш офис, наши агенты приедут в удобное для Вас время и место. Помимо страхования ООО "Раира" занимается экспертизой и оценочной деятельностью.</p>
		<p>Помимо страхования ООО "Раира" занимается экспертизой и оценочной деятельностью.</p>
	</div><!-- end content -->

Где ссылочка на твой макет? не вижу

http://greengarden.ru/new/

(ниже на 1 тему в этом форуме)

Edited April 27, 2009 by Verder

psywalker · April 27, 2009

Verder

Причём тут вабще Дрим, я ручками пишу уже давно в блокноте, а код такой, потому что я приучаю так себя писать постоянно, у тебя я посматрю вабще ничего не понятно, в строчку к тамуже , и это ты считаешь пральна и красиво? Ссылку бы хоть поставил на логотип, мастак

Edited April 27, 2009 by psywalker

Verder · April 27, 2009

Причём тут вабще Дрим, я ручками пишу уже давно в блокноте, а код такой, потому что я приучаю так себя писать постоянно...

Поверь, я могу отличить код, написанный машиной, от кода, написанного человеком... Но спорить не буду, каждому свое.

у тебя я посматрю вабще ничего не понятно, в строчку к тамуже , и это ты считаешь пральна и красиво?

А для тебя что важно? Чтобы кому-то было удобней разобраться в коде или чтобы страница хотя бы на пару секунд быстрее открывалась? Для меня второе.

Некрасиво? Да плевать, зато правильно (ну с этим можно поспорить) и быстро.

И если ты приучаешь себя писать код как дримвьюер ( хотя на 99% это в нем написано а не руками, все пробелы и "лесенки" до пикселя), то это не очень хорошая привычка как мне кажется.

Ссылку бы хоть поставил на логотип, мастак wink.gif

Ты вообще понимаешь различие между макетом и готовым сайтом? Неужели ты думаешь, что заказчик примет работу с одной главной страницей, ведущими в никуда ссылками и.т.д.???

Edited April 27, 2009 by Verder

rus · April 27, 2009

Тихо, тихо! Разошлись понимаешь...

Тема то другая, уж простите, но давайте не отдаляться от нее, на крайняк можно отдельный топик во флейме и там рассуждать.

Уважайте пожалуйста и себя и автора.

У меня тоже "дримная" верстка и если надо - то почищу код ручками, в смысле упорядочу, структурирую..., ну вобщем поняли.

В принципе все ясно, но последний незавершонный вопрос остался:

1) Почему при разрешении скажем 800*600 появляется белая пустая полоса с права при скроллировании ну и сам скролл естесственно?

2) И почему ...лять при этом же разрешении прыгают блоки (отступ от блоков до футера)?

Verder · April 27, 2009

Тихо, тихо! Разошлись понимаешь...
Тема то другая, уж простите, но давайте не отдаляться от нее, на крайняк можно отдельный топик во флейме и там рассуждать.
Уважайте пожалуйста и себя и автора.
У меня тоже "дримная" верстка и если надо - то почищу код ручками, в смысле упорядочу, структурирую..., ну вобщем поняли.
В принципе все ясно, но последний незавершонный вопрос остался:
1) Почему при разрешении скажем 800*600 появляется белая пустая полоса с права при скроллировании ну и сам скролл естесственно?
2) И почему ...лять при этом же разрешении прыгают блоки (отступ от блоков до футера)?

rus, я спокоен

Слушай, а чего ты заморачиваешься с чужим макетом?

Будет заказ - будет и дизайн, и верстка, и заказчик нервов потрепет... А так это просто онанизм.

Могу тебе как задание реальный макет подкинуть( если потренироваться охота), потом сравним у кого что получилось.

psywalker · April 27, 2009

Verder

1) А ты потом сам в коде своём разобраться сможешь?

2) А заказчику ты свою строчку покажешь одну?

3)

И если ты приучаешь себя писать код как дримвьюер ( хотя на 99% это в нем написано а не руками, все пробелы и "лесенки" до пикселя),

А в Notepad++ так по твойму написать нельзя чтоли или ты кроме Дрима ничё не знаешь?

4) rus извини, что развели тут споры, всётаки это твой топик

Verder · April 27, 2009

Verder
1) А ты потом сам в коде своём разобраться сможешь?
2) А заказчику ты свою строчку покажешь одну?
3)
А в Notepad++ так по твойму написать нельзя чтоли или ты кроме Дрима ничё не знаешь?
4) rus извини, что развели тут споры, всётаки это твой топик

Ну вообще то разбираться в коде должен только сам кодер

Ты хоть раз делал реальную работу? У тебя заказчик просил "предъявить" код???

Ну для примера - http://www.kalinka-realty.ru/

Ты считаешь, что кодер в студии Лебедева (хотя мне не очень нравятся их работы, Actis лучше) тоже нихрена в своем коде не понимает?

Может и можно в твоем Notepad++ такое написать, но чище код от этого не становится, только грязнее. Так что дрим или N++ - та же попа только вид сбоку.

Есть только один приличный редактор - WebDev. Платный. И даже после него приходится чистить.

Ладно, закрыли тему, разговор и правда не об этом.

psywalker · April 27, 2009

rus

1) Насчёт прыгающих блоков я считаю , что это баг Ие, ты поставил общую ширину контейнеров 100%, а ИЕ трактует её по своему, поэтому тебе может быть поможет убрать немного width: ,например у середины, сделай её не 60%, а например 59.9%...

Потом попробуй плавающим блокам поставить display: inline;

Рус, но это не факт, просто как вариант,

Verder · April 27, 2009

rus
1) Насчёт прыгающих блоков я считаю , что это баг Ие, ты поставил общую ширину контейнеров 100%, а ИЕ трактует её по своему, поэтому тебе может быть поможет убрать немного width: ,например у середины, сделай её не 60%, а например 59.9%...
Потом попробуй плавающим блокам поставить display: inline;
Рус, но это не факт, просто как вариант,

Смотрим и наслаждаемся знанием

http://www.artlebedev.ru/tools/technogrett...floats-in-ie-3/

Но можно просто включить логику и начать взращивать в себе экспериментатора.

klierik · April 28, 2009

Поверь, я могу отличить код, написанный машиной, от кода, написанного человеком... Но спорить не буду, каждому свое.

Извините, что встряю в диалог, не могли бы Вы подсказать, где писал человек и где программа?

biotech-service.com.ua, www.obigrai.ru, pyatnitca.com

Буду весьма Вам благодарен.

Sign In

Raira 3

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information